<template>
	<view>
		<view class="scroll_header"></view>
		<scroll-view scroll-y="true" :style="{height: scrollHeight}" :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="scrolltolower"
		 refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view class="" v-else>
				<!-- 头部 -->
				<view class="order_header m-2 d-flex bg-white p-2 rounded-20">
					<view class="flex-1" v-for="(item,index) in orderTab" :key="index" @click="tab_order(item)">
						<view class="text-center">
							<image :src="item.img" mode="" class="order_img" ></image>
						</view>
						<view class="font text-center">{{item.name}}</view>
					</view>
				</view>
				
				<!-- 内容 -->
				<view v-if="orderArray.length<=0" class="d-flex flex-column w-100 a-center j-center h-70">
					<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
					<view class="">暂无订单</view>
				</view>
				<view class="" v-else>
					<view  class="order_card mx-2 mb-2" v-for="(item,index) in orderArray" :key="index" @click="oreder_detail(item)">
						<view class="order_card_head px-3 py-2">
							<view class="d-flex j-sb font-md pt">
								<view class="d-flex a-center">
									<view class="mr-1 rounded-50 d-flex user_img j-center a-center">
										<u-icon name="account-fill" color="#ff6b69" size="30"></u-icon>
									</view>
									<view class="">{{item.mobile}}</view>
								</view>
								<view class="">{{item.label_order_status}}</view>
							</view>
							<view class="font d-flex j-sb text-666">
								<view class="">{{item.create_time}}</view>
								<view class="">{{item.order_sn}}</view>
							</view>
						</view>
						<view class="bg-white order_card_content p-3">
							<view class="d-flex">
								<view class="d-flex a-center" v-if="item.goods_items.length>1">
									<view  class="mr-1" v-for="(imgItem,imgIndex) in item.goods_items" :key="index">
										<image class="today_hot rounded-20" :src="imgItem.img.url?imgItem.img.url:defaltImage" mode=""></image>
									</view>
									<view class="mr-2" v-if="item.goods_items.length>3">
										<u-icon name="more-dot-fill" color="#eaeaea" size="50"></u-icon>
									</view>
								</view>
								<view class="d-flex" v-else>
									<view class="mr-1">
										<image class="today_hot rounded-20" :src="item.goods_items[0].img.url" mode=""></image>
									</view>
									<view class="mx-2 my-1">
										<view class="ellipsis">{{item.goods_items[0].name}}</view>
									</view>
								</view>
							</view>
							<view class="py-2">共{{item.goods_number}}件，合计：{{item.formated_total_fee}} <span v-if="item.label_order_status=='待付款'">({{"含运费"+item.formated_shipping_fee}})</span></view> 
							
							<!-- <view class="d-flex order_card_content_footer j-end font-md" v-if="item.label_order_status=='待付款'">
								<view class="" @click="order_payment(item)">付款</view>
								<view class="" @click="order_mouse(item)">改价</view>
								<view class="" @click="close(item)">关闭</view>
							</view>
							<view class="d-flex order_card_content_footer j-end font-md" v-if="item.label_order_status=='待收货' || item.label_order_status=='已完成'">
								<view class="" @click="order_flow(item)">查看物流</view>
								<view class="" @click="order_record(item)">备注</view>
							</view>
							<view class="d-flex order_card_content_footer j-end font-md" v-if="item.label_order_status=='待发货'">
								<view class="" @click="order_send(item)">发货</view>
								<view class="" @click="close(item)">关闭</view>
							</view> -->
						</view>
					</view>
				</view>
				<view class="pb-2" v-if="!orderArray.length<=0">
					<view class="" v-if="orderArray.length==total"  @click="loadmores">
						<u-loadmore status="nomore" icon-type="circle" />
					</view>
					<view class="" v-else >
						<u-loadmore status="loading" icon-type="circle" />
					</view>
				</view>	
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const SIZE = 10
	export default {
		onShareAppMessage() {
			return {
				from:'menu'
			}
		},
		data() {
			return {
				defaltImage:'../../static/images/goods/icon_default_image.png',
				orderTab:[
					{name:"今日订单",img:"../../static/images/order/icon_home_down_today_order.png"},
					{name:"待处理",img:"../../static/images/order/icon_home_down_wait_order.png"},
					{name:"发货",img:"../../static/images/order/icon_home_down_send_order.png"},
					{name:"退货",img:"../../static/images/order/icon_home_down_return_order.png"},
					{name:"历史订单",img:"../../static/images/home/icon_home_down_history_order.png"}
				],
				orderArray:"" ,// 订单列表
				more:1, // 第几页
				count:10, // 条数
				scrollHeight:0, // 自适应高度
				u_loadmore:true, // 加载中
				triggered: false, // 下拉刷新
				total:0,// 总条数
				scrollTop:0,
				old: {
					scrollTop: 0
				}
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.scroll_header').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		methods: {
			// 下拉刷新 自定义下拉刷新控件被下拉
			onPulling(e) {
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
			    if (this._freshing) return;
			    this._freshing = true;
			    setTimeout(() => {
					this.getData()
					this.triggered = false;
					this._freshing = false;
			    }, 1000)
			},
			// 自定义下拉刷新被复位
			onRestore() {
			    this.triggered = 'restore'; // 需要重置
			},
			// 上拉加载函数
			scrolltolower(e){
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				if(that.orderArray.length==that.total){
					return
				}else{
					setTimeout(()=>{
					    that.getData()
					},1000)
				}
			},
			// 滚动时触发
			scroll(e){
				this.old.scrollTop = e.detail.scrollTop
			},	
			// 回到顶部
			loadmores(){
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			
			getData(){
				this.$H.post("admin/orders/list",{
					pagination:{
						count:this.count,
						page:this.more
					}
				}).then(res=>{
					this.orderArray=res.data
					console.log(res)
				})
			},
			// 上拉加载函数
			scrolltolower(e){
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				setTimeout(()=>{
				    that.getData()
				},1000)
			},
			tab_order(item){
				if(item.name=="今日订单"){
					uni.navigateTo({
						url:"/pagesA/order/order-today"
					})
				}else if(item.name=="待处理"){
					
				}else if(item.name=="发货"){
					uni.navigateTo({
						url:"/pagesA/order/order-today-send"
					})
				}else if(item.name=="退货"){
					
				}else if(item.name=="历史订单"){
					
				}
			},
			// 去详情页面
			oreder_detail(item){
				uni.navigateTo({
					url:"/pagesA/order/order-today-send-detail?order_id="+item.order_id
				})
			},
			// 发货
			order_send(item){
				uni.navigateTo({
					url:"/pagesA/order/order-today-shipments?order_id="+item.order_id
				})
			},
			// 付款
			order_payment(item){
				uni.navigateTo({
					url:"/pagesA/order/order-confirm?order_id="+item.order_id
				})
			},
			// 改价
			order_mouse(item){
				uni.navigateTo({
					url:"/pagesA/order/order-mouse?order_id="+item.order_id
				})
			},
			// 关闭
			close(item){
				uni.navigateTo({
					url:"/pagesA/order/order-close?order_id="+item.order_id
				})
			},
			// 操作记录
			order_record(item){
				uni.navigateTo({
					url:"/pagesA/order/order-record?order_id="+item.order_id
				})
			},
			// 物流信息
			order_flow(item){
				uni.navigateTo({
					url:"/pagesA/order/order-flow?order_id="+item.order_id
				})
			}
		},
		onLoad() {
			// 下拉刷新
			this._freshing = false;
			this.$H.post("admin/orders/list",{
				pagination:{
					count:this.count,
					page:this.more
				}
			}).then(res=>{
				if(res.status.succeed == 1){
					this.u_loadmore=false 
					this.orderArray=res.data
					this.total=res.paginated.total
				}
			})		
		},
		onShow() {
			this.$H.post("admin/orders/list",{
				pagination:{
					count:this.count,
					page:this.more
				}
			}).then(res=>{
				this.orderArray=res.data
			})
		}
	}
</script>

<style>
	.user_img{
		width: 40upx;
		height: 40upx;
		background-color: #ffd1d0;
	}
	.order_img{
		width: 130upx;
		height: 130upx;
		border-radius: 50%;
	}
	.order_card{
		border-radius: 50upx;
	}
	.order_card_head{
		background: linear-gradient(to right,#ffeee9,#ffd3cc);
		border-radius: 20upx 20upx 0 0;
	}
	.order_card_head_img{
		width: 45upx;
		height: 30upx;
	}
	.order_card_content{
		border-radius: 0 0 20upx 20upx;	
	}
	.order_card_content image{
		width: 140upx;
		height: 140upx;
	}
	
	.order_card_content_footer view{
		border: 1px solid #999999;
		padding:8upx 30upx;
		margin-right: 10upx;
		border-radius: 30upx;
	}

</style>
